<template>
  <el-dialog
    v-model="dialogFormVisible"
    :close-on-click-modal="false"
    :title="title"
    width="60%"
    @close="close"
  >
    <vab-query-form>
      <vab-query-form-top-panel>
        <el-form
          :inline="true"
          label-width="0"
          :model="queryForm"
          @submit.prevent
        >
          <el-form-item>
            <el-select
              v-model="queryForm.package_id"
              class="input_w"
              clearable
              placeholder="请选择书包"
            >
              <el-option
                v-for="item in bookPackList"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              />
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button
              :icon="Search"
              native-type="submit"
              type="primary"
              @click="queryData"
            >
              查询
            </el-button>
          </el-form-item>
          <el-form-item>
            <el-button :icon="Plus" type="primary" @click="handleAdd()">
              添加书籍
            </el-button>
          </el-form-item>
        </el-form>
      </vab-query-form-top-panel>
    </vab-query-form>
    <el-table
      v-loading="listLoading"
      :border="border"
      :data="list"
      :height="height"
      :stripe="stripe"
    >
      <!--  TODO element-plus未知原因不支*持拖拽后宽度重新计算，暂时放弃 -->
      <el-table-column
        v-for="(item, index) in finallyColumns"
        :key="index"
        align="center"
        :label="item.label"
        :prop="item.prop"
        :show-overflow-tooltip="true"
        :sortable="item.sortable"
        width="auto"
      >
        <template #default="{ row }">
          <span v-if="item.prop == 'package'">
            <span v-if="row[item.prop] != null && row[item.prop] != ''">
              {{ row[item.prop].name }}
            </span>
          </span>
          <span v-else>{{ row[item.prop] }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" fixed="right" label="操作" width="180">
        <template #default="{ row }">
          <el-button
            class="but_text"
            text
            type="primary"
            @click="handleEdit(row)"
          >
            编辑
          </el-button>
          <el-button
            class="but_text"
            text
            type="primary"
            @click="handleDelete(row)"
          >
            删除
          </el-button>
        </template>
      </el-table-column>
      <el-dialog v-model="dialogVisible" append-to-body title="查看大图">
        <div style="display: flex; justify-content: center">
          <el-image :src="dialogImageUrl" />
        </div>
      </el-dialog>
      <template #empty>
        <el-empty description="暂无数据" />
      </template>
    </el-table>
    <EditList ref="editBookRef" @fetch-data="weComBookListData" />
  </el-dialog>
</template>

<script>
  import {
    getWeComBookList,
    doWeComBookDel,
    getWeComBookPack,
  } from '@/api/enterpriseWeChat/weCom'
  import { Plus, Search } from '@element-plus/icons-vue'
  export default defineComponent({
    name: 'TableBookListEdit',
    components: {
      EditList: defineAsyncComponent(() => import('./TableBookEdit')),
    },
    setup() {
      const $baseMessage = inject('$baseMessage')
      const $baseConfirm = inject('$baseConfirm')
      const state = reactive({
        editBookRef: null,
        title: '',
        columns: [
          {
            label: '书籍ID',
            prop: 'book_id',
          },
          {
            label: '书包',
            prop: 'package',
          },
          {
            label: '简介描述',
            prop: 'desc',
          },
          {
            label: '跳转链接',
            prop: 'url',
          },
        ],
        corp_id: '',
        open_kfid: '',
        dialogImageUrl: '',
        queryForm: {
          package_id: 1,
        },
        list: [],
        bookPackList: [],
        border: true,
        height: 400,
        stripe: false,
        listLoading: true,
        dialogVisible: false,
        dialogFormVisible: false,
      })
      const finallyColumns = computed(() => {
        return state.columns
      })
      const showEdit = async (corp_id) => {
        state.title = '推荐书籍列表'
        state.corp_id = corp_id
        weComBookPack()
        weComBookListData()
        state.dialogFormVisible = true
      }
      const queryData = () => {
        weComBookListData()
      }
      const weComBookListData = async () => {
        state.listLoading = true
        const { data } = await getWeComBookList({
          package_id: state.queryForm.package_id,
        })
        state.list = data
        state.listLoading = false
      }
      const weComBookPack = async () => {
        const { data } = await getWeComBookPack()
        state.bookPackList = data
      }
      const handleAdd = () => {
        state['editBookRef'].showEdit(state.bookPackList)
      }
      const handleEdit = (row) => {
        state['editBookRef'].showEdit(state.bookPackList, row)
      }
      const handleDelete = (row) => {
        if (row.id) {
          $baseConfirm('你确定要删除当前项吗', null, async () => {
            const { message } = await doWeComBookDel({
              id: row.id,
            })
            $baseMessage(message, 'success', 'vab-hey-message-success')
            await weComBookListData()
          })
        }
      }
      const close = () => {
        state.list = []
        state.dialogFormVisible = false
      }
      return {
        ...toRefs(state),
        showEdit,
        close,
        finallyColumns,
        Plus,
        Search,
        queryData,
        handleAdd,
        handleEdit,
        handleDelete,
        weComBookListData,
      }
    },
  })
</script>
<style lang="scss" scoped></style>
